<template>
    <div class=''>
        <div class="title">
            <img style="height: 30px; width: 30px; margin-left: 10px;"
                src="@/assets/menuListLogo/com.todoplan.qingdan.webp">
            <span style="padding-left: 10px;">番茄ToDo</span>
        </div>
        <div class="div_content">
            <div class="divs" v-for="(item, idx) in tomatoList" :key="idx">
                <div :class="classHandler(item.priority)" class="divs_type">{{ typeHandler(item.priority) }}</div>
                <div style="padding: 5px;">
                    <div class="divs_time">{{ item.datetime }}</div>
                    <div v-show="item.folder">清单：<el-tag size="mini">{{ item.folder }}</el-tag></div>
                    <span class="divs_title">{{ item.title }}</span>
                    <span class="divs_hasfinish"
                        :class="{ 'blueColor': item.success == '1', 'redColor': item.success == '0' }">{{
                            item.success
                            == '0' ? '未完成' : '已完成' }}</span>
                    <div class="divs_detail">{{ item.description }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getTomatoListApi } from '@/api/addApp/tomato_api.js'
export default {
    name: 'tomatoCom',
    props: ['sendData'],
    data() {
        return {
            tomatoList: [],
            offset: 1,
            limit: 20,
        };
    },
    components: {

    },
    created() {

    },
    mounted() {
        this.getTomatoList();
    },
    methods: {
        //判断类型
        typeHandler(data) {
            if (data == '1') {
                return '重要且紧急'
            } else if (data == '2') {
                return '重要但不紧急'
            } else if (data == '3') {
                return '不重要但紧急'
            } else if (data == '4') {
                return '不重要且不紧急'
            }
        },
        //根据类型返回颜色
        classHandler(data) {
            if (data == '1') {
                return 'red'
            } else if (data == '2') {
                return 'orange'
            } else if (data == '3') {
                return 'blue'
            } else if (data == '4') {
                return 'green'
            }
        },
        async getTomatoList() {
            let data = {
                proof_num: this.sendData.proof_num,
                limit: this.limit,
                offset: this.offset,
            }
            let list = await getTomatoListApi(data);
            this.tomatoList = list.data
        },

    },
};
</script>

<style lang='scss' scoped>
.blueColor {
    color: #03a3e3;
}

.redColor {
    color: #f56c6c;
}

.red {
    background-color: #f56c6c;
}

.orange {
    background-color: #e6a23c;
}

.blue {
    background-color: #03a3e3;
}

.green {
    background-color: #67c23a;
}

.title {
    height: 50px;
    background-color: #2b2f3a;
    margin-bottom: 10px;
    font-size: 15px;
    color: #fff;
    display: flex;
    align-items: center;
}

.div_content {
            // height: 750px;
            // overflow-y: auto;
            column-count: 2;
            column-gap: 0;

            .divs {
                border: 1px solid #eee;
                border-radius: 10px;
                margin: 0px 5px 10px 5px;
                height: 100%;
                overflow: auto;

                .divs_type {
                    color: #fff;
                    width: 100%;
                    // border-radius: 20px;
                    text-align: center;
                    margin-bottom: 5px;
                }

                .divs_time {
                    color: #9d9292;
                    font-size: 12px;
                }

                .divs_title {
                    font-weight: 900;
                }

                .divs_hasfinish {
                    font-size: 9px;
                    margin-left: 3px;
                }

                .divs_detail {
                    font-size: 12px;
                    color: #665f5f;
                }
            }

            :hover {
                border-color: #03a3e3;
            }

        }

</style>

